<template>
  <div class="pos-container">
    <!-- 顶部操作栏 -->
    <div class="pos-header">
      <div class="header-left">
        <h2>收银系统</h2>
        <span class="cashier-info">收银员：{{ cashierName }}</span>
      </div>
      <div class="header-right">
        <button class="btn-secondary" @click="suspendOrder">挂单</button>
        <button class="btn-secondary" @click="openDrawer">开钱箱</button>
        <button class="btn-danger" @click="logout">退出</button>
      </div>
    </div>

    <!-- 主体内容区域 -->
    <div class="pos-main">
      <!-- 左侧商品操作区 -->
      <div class="pos-left">
        <!-- 商品搜索/扫码区 -->
        <div class="search-section">
          <div class="search-bar">
            <input 
              v-model="searchQuery" 
              @keyup.enter="searchProduct"
              placeholder="请扫描条码或输入商品名称/编码"
              class="search-input"
              ref="searchInput"
            />
            <button @click="searchProduct" class="btn-primary">搜索</button>
          </div>
        </div>

        <!-- 购物车商品列表 -->
        <div class="cart-section">
          <div class="cart-header">
            <span>商品列表</span>
            <span class="item-count">共 {{ cartItems.length }} 件商品</span>
          </div>
          
          <div class="cart-items">
            <div 
              v-for="(item, index) in cartItems" 
              :key="item.id + '_' + index"
              class="cart-item"
              :class="{ 'selected': selectedItemIndex === index }"
              @click="selectItem(index)"
            >
              <div class="item-info">
                <div class="item-name">{{ item.name }}</div>
                <div class="item-code">{{ item.code }}</div>
                <div class="item-price">¥{{ item.price.toFixed(2) }}</div>
              </div>
              <div class="item-quantity">
                <button @click.stop="decreaseQuantity(index)" class="qty-btn">-</button>
                <input 
                  v-model.number="item.quantity" 
                  @change="updateQuantity(index)"
                  class="qty-input"
                  min="1"
                />
                <button @click.stop="increaseQuantity(index)" class="qty-btn">+</button>
              </div>
              <div class="item-total">¥{{ (item.price * item.quantity).toFixed(2) }}</div>
              <button @click.stop="removeItem(index)" class="remove-btn">×</button>
            </div>
          </div>

          <!-- 购物车为空时的提示 -->
          <div v-if="cartItems.length === 0" class="empty-cart">
            <p>购物车为空</p>
            <p>请扫描商品条码或搜索商品</p>
          </div>
        </div>
      </div>

      <!-- 右侧结算区 -->
      <div class="pos-right">
        <!-- 金额统计 -->
        <div class="amount-section">
          <div class="amount-row">
            <span>商品总额：</span>
            <span class="amount">¥{{ totalAmount.toFixed(2) }}</span>
          </div>
          <div class="amount-row">
            <span>优惠金额：</span>
            <span class="amount discount">-¥{{ discountAmount.toFixed(2) }}</span>
          </div>
          <div class="amount-row total-row">
            <span>应收金额：</span>
            <span class="amount total">¥{{ finalAmount.toFixed(2) }}</span>
          </div>
        </div>

        <!-- 支付方式 -->
        <div class="payment-section">
          <h3>支付方式</h3>
          <div class="payment-methods">
            <button 
              v-for="method in paymentMethods" 
              :key="method.id"
              @click="selectPaymentMethod(method)"
              class="payment-btn"
              :class="{ 'active': selectedPaymentMethod?.id === method.id }"
            >
              <span class="payment-icon">{{ method.icon }}</span>
              <span>{{ method.name }}</span>
            </button>
          </div>

          <!-- 现金支付时的找零 -->
          <div v-if="selectedPaymentMethod?.id === 'cash'" class="cash-payment">
            <div class="cash-input">
              <label>收款金额：</label>
              <input 
                v-model.number="receivedAmount" 
                @input="calculateChange"
                placeholder="请输入收款金额"
                class="amount-input"
              />
            </div>
            <div class="change-amount">
              <span>找零：</span>
              <span class="change">¥{{ changeAmount.toFixed(2) }}</span>
            </div>
          </div>
        </div>

        <!-- 结算按钮 -->
        <div class="checkout-section">
          <button 
            @click="processPayment" 
            :disabled="!canCheckout"
            class="checkout-btn"
          >
            立即结算
          </button>
        </div>

        <!-- 快捷操作 -->
        <div class="quick-actions">
          <button @click="clearCart" class="btn-secondary">清空购物车</button>
          <button @click="openReturnDialog" class="btn-secondary">退货</button>
          <button @click="viewHistory" class="btn-secondary">交易记录</button>
          <button @click="viewReports" class="btn-secondary">报表分析</button>
        </div>
      </div>
    </div>

    <!-- 退货弹窗 -->
    <div v-if="returnVisible" class="dialog-mask" @click.self="returnVisible=false">
      <div class="dialog" style="width:720px;max-width:92vw;">
        <div class="dialog-header">
          <div class="dialog-title">退货</div>
          <button class="iconbtn" @click="returnVisible=false">✕</button>
        </div>
        <div class="dialog-body">
          <div class="form-grid" style="grid-template-columns:120px 1fr;">
            <label>退货方式</label>
            <select v-model="returnForm.refundMethod">
              <option value="original">原路退回</option>
              <option value="cash">现金退款</option>
              <option value="stored">退至储值</option>
            </select>

            <label>退货原因</label>
            <input v-model="returnForm.reason" placeholder="如：客户退货/质量问题" />

            <label>备注</label>
            <input v-model="returnForm.remark" />
          </div>

          <div class="table-wrap" style="margin-top:12px;">
            <table class="table">
              <thead>
                <tr>
                  <th style="width:140px;">编码</th>
                  <th>名称</th>
                  <th style="width:120px;">单价</th>
                  <th style="width:140px;">退货数量</th>
                  <th style="width:120px;">小计</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(it, idx) in returnItems" :key="it.code + '_' + idx">
                  <td>{{ it.code }}</td>
                  <td>{{ it.name }}</td>
                  <td>¥{{ Number(it.price).toFixed(2) }}</td>
                  <td>
                    <div style="display:flex; align-items:center; gap:6px;">
                      <button class="qty-btn" @click="decReturnQty(idx)">-</button>
                      <input class="qty-input" v-model.number="it.qty" @change="onReturnQtyChange(idx)" min="0" />
                      <button class="qty-btn" @click="incReturnQty(idx)">+</button>
                    </div>
                  </td>
                  <td>¥{{ (Number(it.price) * Number(it.qty || 0)).toFixed(2) }}</td>
                </tr>
                <tr v-if="returnItems.length===0">
                  <td colspan="5" class="empty">暂无可退货商品</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div style="text-align:right; margin-top:12px; font-weight:700;">应退金额：¥{{ returnAmount.toFixed(2) }}</div>
        </div>
        <div class="dialog-footer">
          <button class="ghost" @click="returnVisible=false">取消</button>
          <button class="primary" :disabled="returnItems.length===0 || returnAmount<=0" @click="confirmReturn">确认退货</button>
        </div>
      </div>
    </div>
  </div>
  </template>
  
<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { useStockStore } from '@/stores/stock'
import { useReturnStore } from '@/stores/return'

// 路由
const router = useRouter()
const stockStore = useStockStore()
const returnStore = useReturnStore()

// 响应式数据
const cashierName = ref('张三')
const searchQuery = ref('')
const searchInput = ref(null)
const cartItems = ref([])
const selectedItemIndex = ref(-1)
const selectedPaymentMethod = ref(null)
const receivedAmount = ref(0)

// 支付方式配置
const paymentMethods = ref([
  { id: 'cash', name: '现金', icon: '💰' },
  { id: 'wechat', name: '微信支付', icon: '💚' },
  { id: 'alipay', name: '支付宝', icon: '🔵' },
  { id: 'card', name: '刷卡', icon: '💳' }
])

// 计算属性
const totalAmount = computed(() => {
  return cartItems.value.reduce((total, item) => total + (item.price * item.quantity), 0)
})

const discountAmount = computed(() => {
  // 这里可以根据优惠规则计算折扣
  return 0
})

const finalAmount = computed(() => {
  return totalAmount.value - discountAmount.value
})

const changeAmount = computed(() => {
  if (selectedPaymentMethod.value?.id === 'cash' && receivedAmount.value > 0) {
    return Math.max(0, receivedAmount.value - finalAmount.value)
  }
  return 0
})

const canCheckout = computed(() => {
  return cartItems.value.length > 0 && 
         selectedPaymentMethod.value && 
         (selectedPaymentMethod.value.id !== 'cash' || receivedAmount.value >= finalAmount.value)
})

// 方法
const searchProduct = async () => {
  if (!searchQuery.value.trim()) return

  const q = searchQuery.value.trim()
  const qLower = q.toLowerCase()
  let found = stockStore.stockList.find(p => (p.code || '').toLowerCase() === qLower)
  if (!found) found = stockStore.stockList.find(p => (p.barcode || '').toLowerCase() === qLower)
  if (!found) found = stockStore.stockList.find(p => (p.name || '').toLowerCase().includes(qLower) || (p.code || '').toLowerCase().includes(qLower))

  const product = found ? {
    id: found.id,
    productId: found.id,
    code: found.code,
    name: found.name,
    price: Number(found.salePrice || 0),
    quantity: 1,
  } : {
    id: Date.now(),
    code: q,
    name: `商品-${q}`,
    price: Math.random() * 100 + 10,
    quantity: 1,
  }

  const existingIndex = cartItems.value.findIndex(item => item.code === product.code)
  if (existingIndex >= 0) {
    cartItems.value[existingIndex].quantity += 1
  } else {
    cartItems.value.push(product)
  }

  searchQuery.value = ''
  focusSearchInput()
}

const selectItem = (index) => {
  selectedItemIndex.value = index
}

const increaseQuantity = (index) => {
  cartItems.value[index].quantity += 1
}

const decreaseQuantity = (index) => {
  if (cartItems.value[index].quantity > 1) {
    cartItems.value[index].quantity -= 1
  }
}

const updateQuantity = (index) => {
  if (cartItems.value[index].quantity < 1) {
    cartItems.value[index].quantity = 1
  }
}

const removeItem = (index) => {
  cartItems.value.splice(index, 1)
  if (selectedItemIndex.value >= cartItems.value.length) {
    selectedItemIndex.value = -1
  }
}

const selectPaymentMethod = (method) => {
  selectedPaymentMethod.value = method
  if (method.id === 'cash') {
    receivedAmount.value = finalAmount.value
  } else {
    receivedAmount.value = 0
  }
}

const calculateChange = () => {
  // 找零计算在computed中处理
}

const processPayment = () => {
  if (!canCheckout.value) return
  
  // 模拟支付处理
  alert(`支付成功！\n支付方式：${selectedPaymentMethod.value.name}\n支付金额：¥${finalAmount.value.toFixed(2)}${
    selectedPaymentMethod.value.id === 'cash' ? `\n收款：¥${receivedAmount.value.toFixed(2)}\n找零：¥${changeAmount.value.toFixed(2)}` : ''
  }`)
  
  // 清空购物车和重置状态
  clearCart()
  selectedPaymentMethod.value = null
  receivedAmount.value = 0
}

const clearCart = () => {
  cartItems.value = []
  selectedItemIndex.value = -1
}

const suspendOrder = () => {
  if (cartItems.value.length === 0) {
    alert('购物车为空，无法挂单')
    return
  }
  alert('订单已挂起')
  clearCart()
}

const openDrawer = () => {
  alert('钱箱已打开')
}

// 退货
const returnVisible = ref(false)
const returnForm = ref({ refundMethod: 'original', reason: '', remark: '' })
const returnItems = ref([])
const returnAmount = computed(() => returnItems.value.reduce((s, it) => s + Number(it.price || 0) * Number(it.qty || 0), 0))

const openReturnDialog = () => {
  if (cartItems.value.length === 0) {
    alert('当前购物车为空，请先选择需退货的商品（可扫描原小票商品条码或手动录入）')
    return
  }
  // 默认将购物车中的商品复制为退货行，并将数量置为0，便于选择退货数量
  returnItems.value = cartItems.value.map(x => ({
    productId: x.productId || '',
    code: x.code,
    name: x.name,
    price: Number(x.price),
    qty: 0,
  }))
  returnForm.value = { refundMethod: 'original', reason: '', remark: '' }
  returnVisible.value = true
}

const incReturnQty = (idx) => {
  const max = Number(cartItems.value[idx]?.quantity || 0)
  returnItems.value[idx].qty = Math.min(max, Number(returnItems.value[idx].qty || 0) + 1)
}
const decReturnQty = (idx) => {
  returnItems.value[idx].qty = Math.max(0, Number(returnItems.value[idx].qty || 0) - 1)
}
const onReturnQtyChange = (idx) => {
  const max = Number(cartItems.value[idx]?.quantity || 0)
  let q = Number(returnItems.value[idx].qty || 0)
  if (Number.isNaN(q) || q < 0) q = 0
  if (q > max) q = max
  returnItems.value[idx].qty = q
}

const confirmReturn = () => {
  const hasQty = returnItems.value.some(x => Number(x.qty || 0) > 0)
  if (!hasQty) { alert('请设置退货数量'); return }

  // 更新库存：退货入库
  const now = new Date().toISOString()
  const resolvedItems = []
  returnItems.value.forEach(it => {
    const qty = Number(it.qty || 0)
    if (qty <= 0) return
    // 通过编码优先匹配库存商品
    const product = stockStore.stockList.find(p => p.code === it.code) || stockStore.stockList.find(p => p.name === it.name)
    if (!product) {
      console.warn('找不到商品，跳过退货入库：', it)
      return
    }
    stockStore.returnInbound({ productId: product.id, quantity: qty, reason: returnForm.value.reason || '顾客退货', operator: cashierName.value, date: now, remark: returnForm.value.remark })
    resolvedItems.push({ ...it, productId: product.id })
  })

  // 记录退货单
  returnStore.initialize()
  returnStore.createReturn({
    items: resolvedItems,
    operator: cashierName.value,
    reason: returnForm.value.reason || '顾客退货',
    channel: '线下',
    buyer: '散客',
    refundMethod: returnForm.value.refundMethod || 'original',
  })

  alert(`退货完成，应退金额：¥${returnAmount.value.toFixed(2)}`)
  returnVisible.value = false
}

const viewHistory = () => {
  router.push('/pos/history')
}

const viewReports = () => {
  router.push('/report')
}

const logout = () => {
  if (confirm('确定要退出收银系统吗？')) {
    // 清空当前状态
    clearCart()
    selectedPaymentMethod.value = null
    receivedAmount.value = 0
    
    // 跳转到登录页面
    router.push('/login')
  }
}

const focusSearchInput = () => {
  nextTick(() => {
    searchInput.value?.focus()
  })
}

// 生命周期
onMounted(() => {
  // 初始化库存/退货
  if (stockStore.stockList.length === 0) stockStore.initializeStock()
  returnStore.initialize()
  focusSearchInput()

  // 添加一些示例商品用于演示（与库存示例对齐，便于退货入库匹配）
  cartItems.value = [
    { id: 1, productId: 'P001', code: 'SKU001', name: '可口可乐', price: 3.5, quantity: 2 },
    { id: 2, productId: 'P007', code: 'SKU007', name: '薯片', price: 12.0, quantity: 1 },
    { id: 3, productId: 'P006', code: 'SKU006', name: '矿泉水', price: 2.0, quantity: 3 }
  ]
})
  </script>
  
<style scoped>
.pos-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  font-family: 'Microsoft YaHei', sans-serif;
}

/* 顶部操作栏 */
.pos-header {
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.header-left h2 {
  margin: 0;
  font-size: 24px;
}

.cashier-info {
  margin-left: 20px;
  font-size: 14px;
  opacity: 0.9;
}

.header-right {
  display: flex;
  gap: 10px;
}

/* 主体内容区域 */
.pos-main {
  flex: 1;
  display: flex;
  gap: 20px;
  padding: 20px;
  overflow: hidden;
}

/* 左侧商品操作区 */
.pos-left {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 搜索区域 */
.search-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.search-bar {
  display: flex;
  gap: 10px;
}

.search-input {
  flex: 1;
  height: 48px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.search-input:focus {
  outline: none;
  border-color: #667eea;
}

/* 购物车区域 */
.cart-section {
  flex: 1;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cart-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.item-count {
  color: #666;
  font-size: 14px;
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.cart-item:hover {
  background-color: #f8f9fa;
}

.cart-item.selected {
  background-color: #e3f2fd;
  border-radius: 8px;
  margin: 0 -10px;
  padding: 15px 10px;
}

.item-info {
  flex: 1;
}

.item-name {
  font-weight: bold;
  margin-bottom: 4px;
}

.item-code {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.item-price {
  color: #e74c3c;
  font-weight: bold;
}

.item-quantity {
  display: flex;
  align-items: center;
  gap: 5px;
}

.qty-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s;
}

.qty-btn:hover {
  background-color: #f0f0f0;
  border-color: #bbb;
}

.qty-input {
  width: 50px;
  height: 30px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.item-total {
  font-weight: bold;
  color: #e74c3c;
  min-width: 80px;
  text-align: right;
}

.remove-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: #ff4757;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.remove-btn:hover {
  background-color: #ff3838;
}

.empty-cart {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  padding: 40px;
}

/* 右侧结算区 */
.pos-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 金额统计 */
.amount-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.amount-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 16px;
}

.amount-row:not(:last-child) {
  border-bottom: 1px solid #f0f0f0;
}

.total-row {
  font-size: 20px;
  font-weight: bold;
  color: #e74c3c;
}

.amount.discount {
  color: #27ae60;
}

.amount.total {
  color: #e74c3c;
  font-size: 24px;
}

/* 支付方式 */
.payment-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.payment-section h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
}

.payment-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.payment-btn {
  padding: 15px;
  border: 2px solid #e1e5e9;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.payment-btn:hover {
  border-color: #667eea;
  background-color: #f8f9ff;
}

.payment-btn.active {
  border-color: #667eea;
  background-color: #667eea;
  color: white;
}

.payment-icon {
  font-size: 24px;
}

.cash-payment {
  border-top: 1px solid #f0f0f0;
  padding-top: 20px;
}

.cash-input {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.cash-input label {
  min-width: 80px;
  font-weight: bold;
}

.amount-input {
  flex: 1;
  height: 40px;
  border: 2px solid #e1e5e9;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 16px;
}

.amount-input:focus {
  outline: none;
  border-color: #667eea;
}

.change-amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.change {
  color: #27ae60;
  font-size: 20px;
}

/* 结算按钮 */
.checkout-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.checkout-btn {
  width: 100%;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

.checkout-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.checkout-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 快捷操作 */
.quick-actions {
  display: flex;
  gap: 10px;
}

/* 通用按钮样式 */
.btn-primary {
  height: 48px;
  padding: 0 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-secondary {
  height: 36px;
  padding: 0 16px;
  background: white;
  color: #666;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background-color: #f8f9fa;
  border-color: #bbb;
}

.btn-danger {
  height: 36px;
  padding: 0 16px;
  background: #ff4757;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-danger:hover {
  background-color: #ff3838;
}

/* 弹窗样式（退货复用） */
.dialog-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center; z-index: 1000; }
.dialog { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2); width: 640px; max-width: 92vw; }
.dialog-header { display:flex; align-items:center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; }
.dialog-title { font-weight: 600; }
.iconbtn { background: transparent; border: none; font-size: 18px; cursor: pointer; }
.dialog-body { padding: 16px; max-height: 60vh; overflow: auto; }
.dialog-footer { padding: 12px 16px; border-top: 1px solid #f0f0f0; text-align: right; }
.form-grid { display: grid; grid-template-columns: 120px 1fr; gap: 10px 12px; align-items: center; }
.form-grid input, .form-grid select { height: 32px; padding: 0 8px; border: 1px solid #dcdfe6; border-radius: 6px; }
.table-wrap { background:#fff; border-radius:8px; overflow:auto; }
.table { width:100%; border-collapse: collapse; font-size:14px; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; text-align: left; }
.empty { text-align:center; color:#888; padding: 16px 0; }

/* 响应式设计 */
@media (max-width: 1200px) {
  .pos-main {
    flex-direction: column;
  }
  
  .pos-left {
    flex: none;
    height: 50vh;
  }
  
  .pos-right {
    flex: none;
  }
  
  .payment-methods {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .pos-header {
    padding: 0 10px;
  }
  
  .header-left h2 {
    font-size: 18px;
  }
  
  .cashier-info {
    display: none;
  }
  
  .pos-main {
    padding: 10px;
    gap: 10px;
  }
  
  .quick-actions {
    flex-direction: column;
  }
}
  </style>